<template>
  <page-lr>
      <el-form size="small" :model="searchForm" label-width="90px" slot="content-right">
        <el-form-item label="发布日期：">
          <el-date-picker v-model="searchForm.publish_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerPublish" @change="getList"></el-date-picker>
        </el-form-item>
      </el-form>
    <div class="list" slot="content-left">
      <v-chart :options="option" autoresize :style="{height:'500px', width:'100%'}"></v-chart>
    </div>
  </page-lr>
</template>
<script>
import {city} from '@/config/env';
export default {
  data() {
    return {
      loading: true,
      searchForm:{
        publish_date: ''
      },
      dateRange:[],
      pickerPublish:{
        disabledDate:(time) => {
          let res = this.dateRange.indexOf(this.$moment(time).format('YYYY-MM-DD'));
          return res == -1;
        }
      },
      list:[],
      option: {},
      domHeight: 500,
    }
  },
  created() {
    this.getPublishDate();
  },
  mounted(){
    this.domHeight = document.body.clientHeight - 64 - 40 - 48*2 - 20;
  },
  methods: {
    getPublishDate(){
      this.$request('get', '/chaqi/get_publish_dates', {}, (data,msg) => {
        this.dateRange = data;
        this.searchForm.publish_date = data[0];
        this.getList();
      })
    },
    getList(){
      this.loading = true
      this.$request('get', '/chaqi/get_publish_detail', this.searchForm, (data,msg) => {
        this.list = data;
        this.initLineOption();
        this.loading = false;
      });
    },
    initLineOption(){
      const aqiData = [];
      const data = [...this.list];
      const index = data.findIndex(i => i.aqi_max || i.aqi_min);
      data.forEach((item, idx) => {
        if (idx >= index) {
          aqiData.push(item.aqi);
        } else {
          aqiData.push(null);
        }
      });
      this.option = {
        title: {
          text: `${city}去过30天AQI值与未来7天AQI预测值（${this.searchForm.publish_date}发布）`,
          left: 'center',
          top: 20,
          textStyle: {
            fontFamily: 'AlibabaPuHuiTi-Bold',
            color: '#000',
            fontSize: 24,
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            let dataIndex = params[0].dataIndex;
            if (!data[dataIndex].aqi_min && !data[dataIndex].aqi_max) {
              return params[0].name + '<br>' + params[0].marker + 'AQI实况及趋势：' + params[0].data;
            }
            let s0 = params.find((i)=> i.seriesName === 'AQI实况及趋势');
            let s1 = params.find((i)=> i.seriesName === 'AQI预测最高值');
            let s2 = params.find((i)=> i.seriesName === 'AQI预测最低值');
            let res = '';
            if(s0){
              res += s0.name + '<br>' + s0.marker +'AQI实况及趋势：' + s0.data;
            }
            if(s1){
              res += '<br>' +s1.marker + 'AQI预测最高值：' + s1.data;
            }
            if(s2){
              res += '<br>' +s2.marker + 'AQI预测最高值：' + s2.data;
            }
            return res;
          }
        },
        grid: {
          top: 100,
          left: 30,
          right: 30,
          bottom: 70,
          containLabel: true
        },
        legend: {
          bottom: 5,
          data: ['AQI实况及趋势', 'AQI预测最高值', 'AQI预测最低值'],
          textStyle: {
            fontSize: 16,
            fontFamily: 'AlibabaPuHuiTi-Regular',
            color: '#000'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.map(i => i.forecast_date),
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            rotate: 45,
            fontFamily: 'AlibabaPuHuiTi-Regular',
            color: '#000',
            fontSize: 14,
          }
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          splitNumber: 4,
          axisLabel: {
            fontFamily: 'AlibabaPuHuiTi-Regular',
            color: '#000',
            fontSize: 14,
          }
        },
        series: [
          {
            type: 'line',
            data: index > 0 ? data.map(i => i.aqi).slice(0, index + 1) : data.map(i => i.aqi),
            lineStyle: {
              color: '#5470c6',
            },
            itemStyle: {
              color: '#5470c6',
            }
          },
          {
            name: 'AQI实况及趋势',
            type: 'line',
            data: aqiData,
            lineStyle: {
              color: '#5470c6',
              type: 'dashed'
            },
            itemStyle: {
              color: '#5470c6',
            }
          },
          {
            name: 'AQI预测最高值',
            type: 'line',
            data: data.map(i => i.aqi_max),
            lineStyle: {
              color: '#6c6c71',
              type: 'dashed'
            },
            itemStyle: {
              color: '#6c6c71',
            }
          },
          {
            name: 'AQI预测最低值',
            type: 'line',
            data: data.map(i => i.aqi_min),
            lineStyle: {
              color: '#93ee82',
              type: 'dashed'
            },
            itemStyle: {
              color: '#93ee82',
            }
          }
        ]
      };
    }
  }
}
</script>